import React, { useState } from "react";
import { Layout, Menu, theme } from "antd";
import { useNavigate, useLocation, Outlet } from "react-router-dom"; // 导入 Outlet
import {
  DashboardOutlined,
  UserOutlined,
  FileTextOutlined,
  ShoppingCartOutlined,
  ProfileOutlined,
  SettingOutlined,
  HistoryOutlined,
} from "@ant-design/icons";

const { Header, Sider, Content } = Layout;

const LayoutComponent = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const { token } = theme.useToken();

  console.log("Layout component rendered"); // 调试日志

  // 菜单项配置，确保所有 key 唯一
  const menuItems = [
    {
      key: "dashboard",
      icon: <DashboardOutlined />,
      label: "仪表盘",
      onClick: () => navigate("/dashboard"),
    },
    {
      key: "users",
      icon: <UserOutlined />,
      label: "用户管理",
      children: [
        {
          key: "users-list",
          label: "用户列表",
          onClick: () => navigate("/users"),
        },
        {
          key: "users-profile",
          label: "用户画像",
          onClick: () => navigate("/users/profile"),
        },
      ],
    },
    {
      key: "fortunes",
      icon: <ProfileOutlined />,
      label: "测算管理",
      onClick: () => navigate("/fortunes"),
    },
    {
      key: "content",
      icon: <FileTextOutlined />,
      label: "内容管理",
      onClick: () => navigate("/content"),
    },
    {
      key: "orders",
      icon: <ShoppingCartOutlined />,
      label: "订单管理",
      onClick: () => navigate("/orders"),
    },
    {
      key: "logs",
      icon: <HistoryOutlined />,
      label: "日志管理",
      onClick: () => navigate("/logs"),
    },
    {
      key: "settings",
      icon: <SettingOutlined />,
      label: "系统设置",
      onClick: () => navigate("/settings"),
    },
  ];

  // 根据当前路径确定默认选中和展开的菜单项
  const getSelectedKeys = () => {
    const path = location.pathname;
    if (path.includes("/users/profile")) return ["users-profile"];
    if (path.includes("/users")) return ["users-list"];
    return [path.split("/")[1] || "dashboard"];
  };

  const getOpenKeys = () => {
    const path = location.pathname;
    if (path.includes("/users")) return ["users"];
    return [];
  };

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
        <div
          style={{
            height: 32,
            margin: 16,
            background: "rgba(255, 255, 255, 0.2)",
            color: "#fff",
            textAlign: "center",
            lineHeight: "32px",
            fontSize: 16,
          }}
        >
          {collapsed ? "管理" : "后台管理"}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={getSelectedKeys()}
          defaultOpenKeys={getOpenKeys()}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: token.colorBgContainer,
            boxShadow: "0 1px 4px rgba(0, 21, 41, 0.08)",
          }}
        >
          <div style={{ padding: "0 24px", fontSize: 18, fontWeight: "bold" }}>
            数据可视化平台
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            background: token.colorBgContainer,
            borderRadius: token.borderRadiusLG,
            minHeight: 280,
          }}
        >
          <Outlet /> {/* 替换 {children} 为 <Outlet /> */}
        </Content>
      </Layout>
    </Layout>
  );
};

export default LayoutComponent;